const path = require('path')
// 在实际项目中，我们可以通过 webpack 的一个插件：HtmlWebpackPlugin 来自动生成HTML文件并引入我们打包好的JS和CSS文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 清理/dist文件夹，在在2.0.0以上的版本中,对clean-webpack-plugin的使用有了一定的变化
// 导出的是以一个对象属性的形式，所以我们在引入的时候需要以解构的方式来获取
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 我们之前的样式代码都是通过 style 标签载入的，那么如何通过 link 引入CSS文件的方式实现呢？
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 模块热替换(Hot Module Replacement)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。
const webpack = require('webpack')

module.exports = {
    mode: 'none', //用于提供模式配置选项告诉webpack相应地使用其内置的优化
    entry: {
        main: path.join(__dirname,'./src/main.js')
    },
    output: {
        path: path.join(__dirname,'./dist'),
        filename: '[name].bundle.js'
    },
    module:{
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif|webp)$/,
                // type: 'asset',
                use:  [
                    {
                      loader: 'url-loader',
                      options: {
                        name: '[name]-[hash:5].[ext]',
                        limit: 1024
                      }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    }, 
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'), //模版文件的路径，这里使用src目录下的index.html文件
            inject: true,//设为 true 表示把JS文件注入到body结尾，CSS文件注入到head中
            // removeComments: true 表示删除模版文件中的注释
            minify: {
                removeComments: true
              }
        }),
        new CleanWebpackPlugin(),//去掉了复杂的参数,直接new即可使用
        new MiniCssExtractPlugin({
            filename: "[name].css"
        }),
        // new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        port: 8080,  // 端口号
        host: '0.0.0.0', // 主机名，设为该值可通过IP访问
        overlay: {
          errors: true // 错误提示
        },
        open: true,
        hot: true
    },
    devtool: 'inline-source-map', // 加入devtool配置
    resolve: {
        alias: {
          '@helper': path.resolve(__dirname,'./src/')
        },
        // 在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。
        // 如：import Comp from './cmponents/Comp'
        // Webpack 会先去寻找 Comp.tsx 文件，如果该文件不存在就去寻找 Comp.tsx 文件， 如果还是找不到就报错。
        extensions: [".css",".js"]
      },
}